<template>
  <el-card>
      <el-page-header @back="toBack" :icon="ArrowLeft" content="修改" />
      <el-divider border-style="color:#ffffff;" />
      <!-- 工作台 -->
      <div class="work-diy">
          <!-- 菜单栏 -->
          <div class="diy-menu">
              <div class="menu-title">
                  <span>组件库</span>
              </div>
              <div class="navs">
                  <div class="navs-group" v-for="(items,indexs) in diyList" :key="indexs">
                      <div class="title">{{items.title}}</div>
                      <div class="navs-components">
                          <div class="special" v-for="(item,index) in items.list" :key="index" @click="onSpecial(item)">
                              <i class="iconfont icon-picture-outline size-26"></i>
                              <span>{{item.name}}</span>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="action">
                  <el-button @click="onSubmit" type="primary" size="small">保存页面</el-button>
              </div>
          </div>
          <!--手机diy容器-->
          <div class="diy-phone">
              <!-- 页面头部 -->
              <div class="phone-top"
               @click="onPhoneIndex(-1)"
               :class="[phoneDiy.page.style.titleTextColor=='black'?'phone-black':'phone-white',phoneIndex==-1?'selected':'']" 
               :style="{backgroundColor:phoneDiy.page.style.titleBackgroundColor,color:phoneDiy.page.style.titleTextColor}">
                  <h4>{{phoneDiy.page.params.title}}</h4>
              </div>
              <!-- 页面内容 -->
              <div class="phone-main" v-if="phoneMainShow">
                  <template v-for="(items,indexs) in phoneDiy.diy" :key="indexs">
                          <div class="drag optional" :data-itemid="indexs" :class="phoneIndex==indexs?'selected':''"  @click="onPhoneIndex(indexs)">
                              <template v-if="items.type=='imageSingle'">
                                  <!-- 单图 -->
                                  <div class="diy-imageSingle" v-for="(item,index) in items.data" :key="index">
                                      <div class="item-image" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                          <img :src="item.imgUrl" :alt="item.imgName" />
                                      </div>
                                  </div>
                              </template>
                              <template v-if="items.type=='video'">
                                  <!-- 视频 -->
                                  <div class="diy-video" :style="{padding:items.style.paddingTop+'px 0px' }">
                                      <video :style="{height:items.style.height+'px'}" :src="items.params.videoUrl" :poster="items.params.poster" controls="">
                                          您的浏览器不支持 video 标签
                                      </video>
                                  </div>
                              </template>
                              <template v-if="items.type=='banner'">
                                  <!-- 轮播 -->
                                  <div class="diy-banner">
                                      <img v-for="(item,index) in items.data" :key="index" :src="item.imgUrl" alt="" />
                                      <div class="dots " :class="items.style.btnShape">
                                          <span :style="{background:items.style.btnColor}" v-for="(item,index) in items.data" :key="index" ></span>
                                      </div>
                                  </div>
                              </template>
                              <template v-if="items.type=='window'">
                                  <!-- 图片橱窗 -->
                                  <div class="diy-window" :style="{background:items.style.background}">
                                      <ul class="data-list" :class="'am-avg-sm-'+items.style.layout">
                                          <li v-for="(item,index) in items.data" :key="index">
                                              <div class="item-image"  :style="{padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                                  <img :src="item.imgUrl" alt="" />
                                              </div>
                                          </li>
                                      </ul>
                                  </div>
                              </template>
                              <template v-if="items.type=='blank'">
                                  <!-- 辅助空白 -->
                                  <div class="diy-blank" :style="{background:items.style.background,height:items.style.height+'px'}"></div>
                              </template>
                              <template v-if="items.type=='guide'">
                                  <!-- 辅助线 -->
                                  <div class="diy-guide" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px'}">
                                      <p :style="{height: '0px',width: '100%',borderTop: items.style.lineHeight+'px '+ items.style.lineStyle + ' '+ items.style.lineColor}"></p>
                                  </div>
                              </template>
                              <template v-if="items.type=='search'">
                                  <!-- 搜索框 -->
                                  <div class="diy-search">
                                      <div class="inner" :class="items.style.searchStyle">
                                          <div class="search-input" :class="items.style.textAlign=='left'?'textLeft':'textCenter'">
                                              <i class="iconfont icon-search"></i>
                                              <span class="search-text">{{items.params.placeholder}}</span>
                                          </div>
                                      </div>
                                  </div>
                              </template>
                              <template v-if="items.type=='notice'">
                                  <!-- 公告组 -->
                                  <div class="diy-notice" :style="{background:items.style.background,padding:items.style.paddingTop+'px 10px'}">
                                      <div class="notice__icon">
                                          <img :src="items.params.icon">
                                      </div>
                                      <div class="notice__text text-truncate">
                                          <span :style="{color:items.style.textColor}">{{items.params.text}}</span>
                                      </div>
                                  </div>
                              </template>
                              <template v-if="items.type=='navBar'">
                                  <!-- 导航组 -->
                                  <div class="diy-navBar" :style="{background:items.style.background}">
                                      <ul :class="'am-avg-sm-'+items.style.rowsNum">
                                          <li v-for="(item,index) in items.data" :key="index">
                                              <div class="item-image">
                                                  <img :src="item.imgUrl" :title="item.imgName" alt="" />
                                              </div>
                                              <p class="item-text am-text-truncate" :style="{color:item.color}">{{item.text}}</p>
                                          </li>
                                      </ul>
                                  </div>
                              </template>
                              <template v-if="items.type=='richText'">
                                  <!-- 富文本 -->
                                  <div class="diy-richText" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                      <div v-html="items.params.content"></div>
                                  </div>
                              </template>
                              <div class="btn-edit-del">
                                  <div class="btn-del" @click.stop="onDel(indexs)">删除</div>
                              </div>
                          </div>
                  </template>
              </div>
          </div>
          <!-- 编辑器容器 -->
          <div class="diy-editor">
              <template v-if="phoneIndex==-1">
                  <div class="editor-title">
                          <span>页面设置</span>
                      </div>
                      <el-form class="tpl-form-line-form" :model="phoneDiy.page" size="mini" :rules="rules" ref="ruleFormRef" label-width="100px">
                          <el-form-item label="页面名称">
                              <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.name"  type="text" placeholder="请输入页面名称"></el-input>
                          </el-form-item>
                          <el-form-item label="页面标题">
                              <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.title"  type="text" placeholder="请输入页面标题"></el-input>
                          </el-form-item>
                          <el-form-item label="分享标题">
                              <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.share_title"  type="text" placeholder="请输入分享标题"></el-input>
                          </el-form-item>
                          <el-form-item label="标题栏文字">
                              <el-radio-group class="margin-left-sm" v-model="phoneDiy.page.style.titleTextColor">
                                  <el-radio label="white" size="small">白色</el-radio>
                                  <el-radio label="black" size="small">黑色</el-radio>
                              </el-radio-group>
                          </el-form-item>
                          <el-form-item label="标题栏颜色">
                              <div class="margin-left-sm" style="width: 60%;">
                                  <el-color-picker v-model="phoneDiy.page.style.titleBackgroundColor" />
                              </div>
                          </el-form-item>
                          
                      </el-form>
              </template>
              <template v-else>
                      <div class="editor-title">
                          <span>{{phoneDiy.diy[phoneIndex].name}}</span>
                      </div>
                      <el-form class="tpl-form-line-form" :model="phoneDiy.diy[phoneIndex]" size="mini" :rules="rules" ref="ruleFormRef" label-width="100px">
                          <template v-if="phoneDiy.diy[phoneIndex].type=='imageSingle'">
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="左右边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                      <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                          <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                          <div class="item-inner">
                                              <div class="row">
                                                  <span class="label-tit">图片</span>
                                                  <img :src="item.imgUrl" @click="onFileShow(index)" class="choice-img" alt="" />
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">链接地址</span>
                                                  <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='video'">
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="视频高度">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider :min="50" :max="400" v-model="phoneDiy.diy[phoneIndex].style.height"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.height}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="视频封面">
                                  <div class="margin-left-sm">
                                      <img :src="phoneDiy.diy[phoneIndex].params.poster" @click="onFileShow(0)" class="choice-img" alt="" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="视频地址">
                                  <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.videoUrl"  type="text" placeholder="请输入分享标题"></el-input>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='banner'">
                              <el-form-item label="指示点形状">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.btnShape">
                                      <el-radio label="round" size="small">圆形</el-radio>
                                      <el-radio label="rectangle" size="small">长方形</el-radio>
                                      <el-radio label="square" size="small">方形</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                              <el-form-item label="指示点颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.btnColor" />
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                      <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                          <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                          <div class="item-inner">
                                              <div class="row">
                                                  <span class="label-tit">图片</span>
                                                  <img :src="item.imgUrl" @click="onFileShow(index)" class="choice-img" alt="" />
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">链接地址</span>
                                                  <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='window'">
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="左右边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="布局方式">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.layout">
                                      <el-radio label="2" size="small">堆积两列</el-radio>
                                      <el-radio label="3" size="small">堆积三列</el-radio>
                                      <el-radio label="4" size="small">堆积四列</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <div class="margin-left-lagre text-gray size-14">请确保所有图片的尺寸/比例相同</div>
                                  <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                      <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                          <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                          <div class="item-inner">
                                              <div class="row">
                                                  <span class="label-tit">图片</span>
                                                  <img :src="item.imgUrl"  @click="onFileShow(index)" class="choice-img" alt="" />
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">链接地址</span>
                                                  <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='blank'">
                              <el-form-item label="组件高度">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="20" :max="200" v-model="phoneDiy.diy[phoneIndex].style.height"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.height}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='guide'">
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="线条样式">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.lineStyle">
                                      <el-radio label="solid" size="small">实线</el-radio>
                                      <el-radio label="dashed" size="small">虚线</el-radio>
                                      <el-radio label="dotted" size="small">电线</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                              <el-form-item label="线条颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.lineColor" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="线条高度">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="1" :max="10" v-model="phoneDiy.diy[phoneIndex].style.lineHeight"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.lineHeight}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="10" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="左右边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                  </div>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='search'">
                              <el-form-item label="提示文字">
                                  <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.placeholder"  type="text" placeholder="请输入提示文字"></el-input>
                              </el-form-item>
                              <el-form-item label="搜索框样式">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.searchStyle">
                                      <el-radio label="square" size="small">方形</el-radio>
                                      <el-radio label="radius" size="small">圆角</el-radio>
                                      <el-radio label="round" size="small">弧角</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                              <el-form-item label="文字对齐">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.textAlign">
                                      <el-radio label="left" size="small">居左</el-radio>
                                      <el-radio label="center" size="small">居中</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='notice'">
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="文字颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.textColor" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="文字图标">
                                  <img :src="phoneDiy.diy[phoneIndex].params.icon"  @click="onFileShow(1)" class="margin-left-sm choice-img" alt="" />
                              </el-form-item>
                              <el-form-item label="公告内容">
                                  <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.text"  type="text" placeholder="请输入提示文字"></el-input>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='navBar'">
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label="布局方式">
                                  <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.rowsNum">
                                      <el-radio label="3" size="small">3个</el-radio>
                                      <el-radio label="4" size="small">4个</el-radio>
                                      <el-radio label="5" size="small">5个</el-radio>
                                  </el-radio-group>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                      <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                          <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                          <div class="item-inner">
                                              <div class="row">
                                                  <span class="label-tit">图片</span>
                                                  <div class="flex flex-direction">
                                                      <img :src="item.imgUrl" style="min-width:50px;min-height:50px;width:50px;" @click="onFileShow(index)" class="choice-img" alt="" />
                                                      <div class="help-block">
                                                          <small>建议尺寸100x100</small>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">文字内容</span>
                                                  <el-input style="width: 400px" v-model="item.text"  type="text" placeholder="请输入链接地址"></el-input>
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">文字颜色</span>
                                                  <el-color-picker v-model="item.color" />
                                              </div>
                                              <div class="row">
                                                  <span class="label-tit">链接地址</span>
                                                  <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                  <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                              </el-form-item>
                          </template>
                          <template v-if="phoneDiy.diy[phoneIndex].type=='richText'">
                              <el-form-item label="上下边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="10" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="左右边距">
                                  <div class="margin-left" style="width: 60%;">
                                      <el-slider  :min="0" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                  </div>
                                  <div class="display-value">
                                      {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                  </div>
                              </el-form-item>
                              <el-form-item label="背景颜色">
                                  <div class="margin-left-sm" style="width: 60%;">
                                      <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                  </div>
                              </el-form-item>
                              <el-form-item label-width="0px">
                                <!-- <vue3-tinymce v-model="phoneDiy.diy[phoneIndex].params.content" :setting="state.setting" /> -->
                                  <!-- <Editor @tContent="onParent" :msg="phoneDiy.diy[phoneIndex].params.content"></Editor> -->
                              </el-form-item>
                          </template>
                  </el-form>
              </template>
          </div>
      </div>
  </el-card>
  <!-- <FileList ref="fileListRef" @onFileFun="onParentFileFun"></FileList> -->
</template>

<script lang="ts" setup>
// import FileList from "@/components/fileList/index.vue";
import { ElNotification } from 'element-plus'
import { fromPwd, fromLength, fromPhone, fromNumber, fromRequired } from '@/common/fromRole';
import { ArrowLeft } from '@element-plus/icons-vue'
// import { useStore } from "vuex";
import { ref, reactive, onMounted,nextTick } from 'vue'
import { useRouter, useRoute, useLink } from "vue-router";
import useCurrentInstance from "@/common/useCurrentInstance";

// import Vue3Tinymce from 'vue3-tinymce';
import diyList from "@/common/diy";
import Sortable from "sortablejs";
const { proxy } = useCurrentInstance();
// const { diyUpdate,diyDetail } = proxy.$api.diy;
// const store = useStore();
const token = "";
const router = useRouter();
const route = useRoute();
const toBack = () => {
  router.back();
}
const action = ref('/admin/api/v1/upload/picture');
const state = reactive({
  setting: {
    height: 800,
    toolbar: 'undo redo | fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    toolbar_mode: 'sliding',
    quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsize forecolor backcolor',
    plugins: 'link image media table lists fullscreen quickbars',
    font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
    line_height_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
    link_default_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,
    language: 'zh-Hans',
    language_url: 'https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js',
    content_style: 'body{font-size: 16px}',
    // 自定义 图片上传模式
    custom_images_upload: true,
    images_upload_url: action,
    custom_images_upload_header:{'Access-Token':token},
    custom_images_upload_callback: (res:any) => {
        console.info(res);
        return res.data.url;
    },
    custom_images_upload_param: { id: '' },
  }
});
const phoneIndex = ref(-1);
const onPhoneIndex = (index:number)=>{
  phoneIndex.value=index;
  dragImgBoxDrag();
}
let  diy: Array < any > = [];
const phoneDiy= reactive({
  page:{
      type:"page",
      params:{
          name:"页面名称",
          title:"商城",
          share_title:"分享名称"
      },
      style:{
          titleTextColor:"white",
          titleBackgroundColor:"#ff8000"
      }
  },
  diy:diy
})
// 追加组件
const onSpecial = (event:any)=>{
  console.info(event);
  let obj=JSON.parse(JSON.stringify(event))
  phoneDiy.diy.push(obj);
  console.info(phoneDiy.diy.length);
  phoneIndex.value=phoneDiy.diy.length-1;
  dragImgBoxDrag();
}
// 删除
const onDel=(indexs:number)=>{
  console.info("删除");
  console.info('phoneDiy.diy.length');
  console.info('phoneIndex.value',phoneIndex.value);
  phoneDiy.diy.splice(indexs, 1);
  if(indexs==phoneIndex.value){
      const nextDiy =phoneDiy.diy[indexs] || phoneDiy.diy[indexs+1] || phoneDiy.diy[indexs-1];
      var key=phoneDiy.diy.indexOf(nextDiy);
      phoneIndex.value=key;
  }else{
      if(phoneDiy.diy.length>0){
          const next = phoneDiy.diy[phoneIndex.value];
          if(!next){
              if(phoneIndex.value!=-1)
              phoneIndex.value=phoneIndex.value-1;
          }
      }else{
          phoneIndex.value=-1;
      }
  }
}
const onAdd=(event:any)=>{
  console.info(event);
  let rows = {};
  diyList.forEach((items:any,indexs:any)=>{
      items.list.forEach((item:any)=>{
          if(item.type==event.type){
              rows=item.data[0];
          }
      })
  })
  phoneDiy.diy[phoneIndex.value].data.push(rows);
}
// 删除图片
const onClose =(indexs:number)=>{
  phoneDiy.diy[phoneIndex.value].data.splice(indexs, 1);
}

const onParent=(event:any)=>{
  console.info(event);
  phoneDiy.diy[phoneIndex.value].params.content=event;
}
const rules = reactive({

})
const ruleFormRef = ref(null)
const onSubmit = () => {
  console.log('onSubmit!');
  console.info(phoneDiy);
  const params = {
    id:route.query.id,
    name:phoneDiy.page.params.name,
    status: 'normal',
    page:JSON.stringify(phoneDiy.page),
    diy:JSON.stringify(phoneDiy.diy)
  }
  console.info(params);
//   diyUpdate(params).then((response: any) => {
//     toBack()
//   }).catch((error: any) => {
//     console.info(error)
//   })
}
const getDetail = () =>{
  const params = {
    id: route.query.id
  }
  console.info(params);
//   diyDetail(params).then((response: any) => {
//     console.info(response);
//     phoneDiy.page=JSON.parse(response.data.page);
//     phoneDiy.diy=JSON.parse(response.data.diy);
//   }).catch((error: any) => {
//     console.info(error)
//   })
}
onMounted(()=>{
  phoneMainDrag();
  getDetail();
})

// 添加移动
const phoneMainShow = ref(true);
const phoneMainDrag = () => {
  const wrapperTr = document.querySelector(".phone-main") as HTMLElement;
  Sortable.create(wrapperTr, {
      draggable: ".drag",
      animation: 180,
      delay: 0,
      onEnd: (evt:any) => {
          const currentRow = phoneDiy.diy.splice(evt.oldIndex, 1);
          phoneDiy.diy.splice(evt.newIndex, 0, currentRow[0]);
          phoneMainShow.value=false;
          if(evt.oldIndex==phoneIndex.value){
              phoneIndex.value=evt.newIndex;
          }
          nextTick(() => {
              phoneMainShow.value=true;
              nextTick(() => {
                  phoneMainDrag();
              })
          });
      }
  });
}

const dragImgBoxShow = ref(true);
const dragImgBoxDrag = () => {
  if(phoneIndex.value==-1)return;
  if(['imageSingle','banner','window','navBar'].includes(phoneDiy.diy[phoneIndex.value].type)===false)return;
  nextTick(() => {
      const wrapper = document.querySelector(".drag-img-box") as HTMLElement;
      Sortable.create(wrapper, {
          draggable: ".item-drag",
          animation: 180,
          delay: 0,
          onEnd: (evt:any) => {
              const currentRow = phoneDiy.diy[phoneIndex.value].data.splice(evt.oldIndex, 1);
              phoneDiy.diy[phoneIndex.value].data.splice(evt.newIndex, 0, currentRow[0]);
              dragImgBoxShow.value=false;
              nextTick(() => {
                  dragImgBoxShow.value=true;
                  nextTick(() => {
                      dragImgBoxDrag();
                  })
              });
          }
      });
  })
}
// const fileListRef = ref();
// const fileIndex = ref(0);
// const onFileShow = (index:any) => {
//   fileIndex.value=index;
//   fileListRef.value.onShow();
// }
const onParentFileFun = (event:any)=>{
  console.info(phoneDiy.diy[phoneIndex.value]);
  if(phoneDiy.diy[phoneIndex.value].type=='video'){
      phoneDiy.diy[phoneIndex.value].params.poster=event[0].url;
  }else if(phoneDiy.diy[phoneIndex.value].type=='notice'){
      phoneDiy.diy[phoneIndex.value].params.icon=event[0].url;
  }else{
      phoneDiy.diy[phoneIndex.value].data[fileIndex.value].imgUrl=event[0].url;
  }
}
</script>

<style lang="scss" scoped>
.work-diy {
  padding: 20px 0;
  display: flex;
  align-items: flex-start;
  // justify-content: space-around;
  // justify-content: space-between;
  
  // 菜单栏
  .diy-menu{
      margin-left: 20px;
      width: 285px;
      min-width: 285px;
      height: auto;
      border: 1px solid #ddd;
      padding: 15px 10px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      user-select: none;
      .menu-title{
          position: relative;
          padding: 0 22px;
          height: 30px;
          border-bottom: 1px solid #eef1f5;
      }
      .menu-title::before {
          content: '';
          position: absolute;
          width: 4px;
          height: 13px;
          background: #00aeff;
          top: 8px;
          left: 9px;
      }
      .navs{
          .navs-group{
              .title{
                  font-size: 0.24rem;
                  margin: 10px 10px 5px 10px;
              }
              .navs-components{
                  display: flex;
                  flex-wrap: wrap;
                  padding: 0px 5px 5px 5px;
                  border-bottom: 1px dotted #ddd;
                  .special{
                      width: 74px;
                      height: 74px;
                      padding: 3px 0;
                      margin: 5px;
                      border: 1px solid #dddddd;
                      text-align: center;
                      font-size: 12px;
                      border-radius: 4px;
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      flex-direction: column;
                      .iconfont{
                          margin-right: 0px;
                      }
                      img{
                          width: 48px;
                          height: 48px;
                      }
                      span{
                          margin-top: 8px;
                      }
                  }
                  .special:hover {
                      // background: #fff;
                      background:var(--el-card-border-color);
                  }
              }
          }
      }
      
      .action{
          margin-top: 15px;
          text-align: right;
          position: relative;
      }
  }
  // 手机diy容器
  .diy-phone{
      margin-left: 20px;
      width: 330px;
      min-width: 330px;
      border-radius: 3px;
      box-shadow: 0 3px 10px #dcdcdc;
      border: 1px solid #ddd;
      .phone-top{
          width: 100%;
          height: 66px;
          text-align: center;
          h4 {
              margin: 0;
              font-weight: normal;
              white-space: nowrap;
              line-height: 88px;
          }
      }
      .phone-top:before{
          cursor: pointer !important;
      }
      .phone-black{
            background-image: url("@/assets/diy/phone-top-black.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .phone-white{
            background-image: url("@/assets/diy/phone-top-white.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
      .phone-main{
          height: 540px;
          border-top: 0;
          overflow-y: auto;
          user-select: none;
          position: relative;
          .btn-edit-del{
              display: none;
          }
          .optional:hover{
              position: relative;
              .btn-edit-del{
                  display: block;
                  height: 16px;
                  position: absolute;
                  right: 2px;
                  bottom: 2px;
                  z-index: 90;
                  .btn-del{
                      width: 32px;
                      height: 16px;
                      line-height: 16px;
                      text-align: center;
                      font-size: 10px;
                      color: #fff;
                      background: rgba(0, 0, 0, 0.4);
                      margin-left: 2px;
                      cursor: pointer;
                      position: relative;
                      z-index: 11;
                  }
              }
          }
          .optional:hover:before{
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border: 2px dashed #00a0e9;
              cursor: move;
              z-index: 10;
          }
          .drag{
              display: block;
              overflow: hidden;
              font-size: 1rem;
              // 单图
              .diy-imageSingle{
                  display: block;
                  margin: 0;
                  padding: 0;
                  height: auto;
                  overflow: hidden;
                  img{
                      display: block;
                      width: 100%;
                  }
              }
              // 视频
              .diy-video{
                  video{
                      display: block;
                      width: 100%;
                  }
              }
              // 轮播
              .diy-banner{
                  display: block;
                  margin: 0;
                  padding: 0;
                  height: auto;
                  overflow: hidden;
                  position: relative;
                  max-height: 200px;
                  img {
                      display: none;
                      width: 100%;
                  }
                  img:first-child {
                      display: block;
                  }
                  .dots{
                      height: 14px;
                      padding: 0 10px;
                      position: absolute;
                      left: 0;
                      right: 0;
                      bottom: 10px;
                      opacity: 0.8;
                      text-align: center;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                  }
                  .round span{
                      display: inline-block;
                      height: 10px;
                      width: 10px;
                      border-radius: 10px;
                      background-color: #fff;
                      margin-left: 5px;
                  }
                  .rectangle span{
                      display: inline-block;
                      height: 10px;
                      width: 16px;
                      background-color: #fff;
                      margin-left: 5px;
                  }
                  .square span{
                      display: inline-block;
                      height: 10px;
                      width: 10px;
                      background-color: #fff;
                      margin-left: 5px;
                  }
              }
              // 图片橱窗
              .diy-window{
                  overflow: hidden;
                  ul, li {
                      list-style: none;
                      padding: 0;
                      margin: 0;
                  }
                  .item-image{
                      img {
                          width: 100%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          border: 0;
                      }
                  }
                  .am-avg-sm-2{
                      li{
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(2n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 50%;
                      }
                  }
                  .am-avg-sm-3{
                      li{
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(3n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 33.33333333%;
                      }
                  }
                  .am-avg-sm-4{
                      li{
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(3n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 25%;
                      }
                  }
              }
              // 搜索框
              .diy-search{
                  background: #f1f1f2;
                  padding: 10px 10px;
                  .inner{
                      height: 30px;
                      background: #fff;
                      overflow: hidden;
                      .search-input{
                          height: 30px;
                          width: 100%;
                          line-height: 30px;
                          color: #999999;
                          padding: 0 10px;
                          display: flex;
                          .icon-search{
                              font-size: 16px;
                          }
                          .search-text{
                              font-size: 14px;
                              margin-left: 2px;
                          }
                      }
                      .textLeft{
                          justify-content: flex-start;
                      }
                      .textCenter{
                          justify-content: center;
                      }
                  }
                  .square{
                      border-radius: 0px;
                  }
                  .radius {
                      border-radius: 5px;
                  }
                  .round{
                      border-radius: 30px;
                  }
              }
              // 公告组
              .diy-notice{
                  padding: 4px 10px;
                  line-height: 26px;
                  display: flex;
                  align-items: center;
                  .notice__icon{
                      min-width: 20px;
                      width: 20px;
                      height: 20px;
                      img{
                          width: 20px;
                          height: 20px;
                      }
                  }
                  .notice__text{
                      flex: 1;
                      padding-left: 5px;
                      span{
                          font-size: 14px;
                      }
                  }
                  .text-truncate{
                      word-wrap: normal;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                  }
                  
              }
              // 导航组
              .diy-navBar{
                  overflow: hidden;
                  .am-avg-sm-3{
                      display: block;
                      padding: 0;
                      margin: 0;
                      list-style: none;
                      li{
                          margin: 10px 0;
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(3n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 33.33333333%;
                      }
                  }
                  .am-avg-sm-4{
                      display: block;
                      padding: 0;
                      margin: 0;
                      list-style: none;
                      li{
                          margin: 10px 0;
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(3n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 25%;
                      }
                  }
                  .am-avg-sm-5{
                      display: block;
                      padding: 0;
                      margin: 0;
                      list-style: none;
                      li{
                          margin: 10px 0;
                          list-style: none;
                          display: block;
                          height: auto;
                          float: left;
                      }
                      li:nth-of-type(3n+1) {
                          clear: both;
                      }
                      li:nth-of-type(n) {
                          clear: none;
                      }
                      li {
                          width: 20%;
                      }
                  }
                  .item-image{
                      text-align: center;
                      margin-bottom: 4px;
                      
                      img{
                          height: 44px;
                          width: 44px;
                          border-radius: 50%;
                      }
                  }
                  .item-text{
                      padding: 0px 10px;
                      font-size: 14px;
                      text-align: center;
                      word-wrap: normal;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                  }
              }
              
          }   
      }
      .selected{
          position: relative;
          .btn-edit-del{
              display: block;
              height: 16px;
              position: absolute;
              right: 2px;
              bottom: 2px;
              z-index: 90;
              .btn-del{
                  width: 32px;
                  height: 16px;
                  line-height: 16px;
                  text-align: center;
                  font-size: 10px;
                  color: #fff;
                  background: rgba(0, 0, 0, 0.4);
                  margin-left: 2px;
                  cursor: pointer;
                  position: relative;
                  z-index: 11;
              }
          }
      }
      .selected:before{
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 2px dashed #00a0e9;
          cursor: move;
          z-index: 10;
      }
  }
  // 编辑器容器
  .diy-editor{
      margin-left: 20px;
      width: 450px;
      min-width: 450px;
      height: auto;
      min-height: 100px;
      padding: 10px 10px;
      border: 1px solid #ddd;
      .editor-title{
          position: relative;
          padding: 0 22px;
          height: 30px;
          border-bottom: 1px solid #eef1f5;
          margin-bottom: 10px;
      }
      .editor-title::before {
          content: '';
          position: absolute;
          width: 4px;
          height: 13px;
          background: #00aeff;
          top: 8px;
          left: 9px;
      }
      .el-form-item{
          margin-bottom: 10px;
      }
      .diy-richText{
            font-size: 1rem;
        }
      .tpl-form-line-form{
          overflow-y: auto;
          height: 560px;
          user-select: none;
          font-size: 1.3rem !important;
          color: #656565;
          .choice-img{
              max-width: 220px;
              height: 50px;
              cursor: pointer;
          }
          .icon-img{
              max-width: 64px;
              width: 64px;
              height: 64px;
          }
          .form-items{
              height: auto;
              padding: 5px 6px;
              display: inline-block;
              width: 100%;
              .form-item{
                  // background: #f7fafc;
                  margin: 0rem 1.6rem 0.6rem 1.6rem;
                  position: relative;
                  border-radius: 3px;
                  cursor: move;
                  .icon-delete{
                      margin-right: 0px;
                      width: 2rem;
                      height: 2rem;
                      position: absolute;
                      top: -15px;
                      right: -12px;
                      text-align: center;
                      cursor: pointer;
                      -webkit-transition: background-color .3s ease-out, border-color .3s ease-out;
                      transition: background-color .3s ease-out, border-color .3s ease-out;
                  }
                  .item-inner{
                      display: flex;
                      flex-direction: column;
                      padding: 0.8rem 0.8rem 1.2rem 0.8rem;
                      // background: #f7fafc;
                      box-shadow: var(--el-box-shadow-light);
                      .row{
                          display: flex;
                          align-items: center;
                          margin-top: 0.8rem;
                          .label-tit{
                              width: 70px;
                              display: inline-flex;
                              justify-content: flex-end;
                              align-items: flex-start;
                              flex: 0 0 auto;
                              font-size: 14px;
                              color: #606266;
                              height: 32px;
                              font-weight: bold;
                              line-height: 32px;
                              padding: 0 12px 0 0;
                              box-sizing: border-box;
                          }
                          
                      }
                  }
              }
          }
          .create{
              width: 100%;
              display: flex;
              margin: 0px 1.8rem;
          }
      }
      .display-value{
          display: inline-block;
          margin-left: 0.8rem;
      }
  }
}
</style>